<template>
    <div class="flexWrap">
        <div class="flexWrap">
            <el-form ref="form" :model="form" size="small" label-width="60px">
                <template v-if="form.type == 11">
                    <template v-for="(r,idx) in form.resources">
                        <el-form-item v-if="r.status == 1" label="链接">
                            <div class="flexWrap chat-item">
                                <div class="flexWrap pr">
                                    <el-input v-if="r.type == 11" v-model="r.content" class="w-px400" @input="update" />
                                </div>
                                <div class="flexWrapBetween" style="margin-left: 10px; width: 65px;">
                                    <el-button class="mini-el" type="text" size="mini" @click="toAdd(11, idx)">增加</el-button>
                                    <el-button class="mini-el" type="text" style="color:red" size="mini" @click="toDel(idx)">删除</el-button>
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                </template>
                <template v-else>
                    <template v-for="(r,idx) in form.resources">
                        <el-form-item v-if="r.status == 1">
                            <div class="flexWrap chat-item">
                                <div class="flexWrap pr">
                                    <i class="el-icon-plus" style="font-size: 30px; line-height: 50px; width: 50px; text-align: center; color: #cccccc; border: 1px dotted #cccccc"></i>
                                    <div class="flexWrap" style="margin: 10px 0 0 10px; width: 370px; height: 30px;">
                                        <div class="txtLine1" style="margin-top: 5px; font-weight: bold; font-size: 13px; color: #888888; width: 100%; line-height: 14px;">{{r.title}}</div>
                                        <div class="txtLine1" style="font-size: 11px; color: #888888; width: 100%; line-height: 12px;">{{r.content}}</div>
                                    </div>
                                    <input type="file" class="pa" style="opacity: 0; width: 100px" :id="idx" @change="toUpload">
                                </div>
                                <div class="flexWrap" style="margin-left: 10px; width: 80px;">
                                    <el-button class="mini-el" type="text" size="mini" @click="toAdd(20, idx)">增加</el-button>
                                    <el-button class="mini-el" type="text" style="color:red" size="mini" @click="toDel(idx)">删除</el-button>
                                </div>
                            </div>
                        </el-form-item>
                    </template>
                </template>

                <el-form-item prop="content" label="描述" >
                    <el-input v-model="form.content" type="textarea" :rows="4" style="width: 400px" />
                </el-form-item>
            </el-form>
        </div>
        <div class="flexWrapCenter w-per100 mt-30">
            <el-button @click="toClose">取 消</el-button>
            <el-button type="primary" @click="toSubmit" style="margin-left: 20px">保 存</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name: "resource-item",
    props: {
        info: {
            type: Object
        },
        complete: {
            type:Function
        }
    },
    data() {
        return {
            form:{resources:[{content:'',type:20}], content:''},
        };
    },
    components: {

    },
    created() {
        this.form = this.info
        this.form.status = 1
        this.form.type = this.form.type || 20
        if (!this.form.resources) this.form.resources = [{content:'',type:11, status:1}]
    },
    methods: {
        toClose(){
            this.$emit("complete");
        },

        update() {
            this.$forceUpdate()
        },

        toAdd(type, idx) {
            if (!idx) idx = 0
            this.form.resources.splice(idx + 1,0, {type:type, content:'', status:1})
            this.update()
        },
        toDel(idx) {
            let item = this.form.resources[idx]
            if (item.id) {
                item.status = -1
            } else {
                this.form.resources.splice(idx, 1)
            }
            this.update()
        },

        toSubmit() {
            let isEmpty = true
            for (let i = 0; i < this.form.resources.length; i++) {
                let r = this.form.resources[i]
                if (r.status == 1) {
                    if (!r.content) {
                        this.$message.error("第 " + (i+ 1) + " 条内容空");
                        return;
                    }

                    if (r.type == 11 && r.content.indexOf("http") !== 0) {
                        this.$message.error("第 " + (i+ 1) + " 条链接应该以 http 或者 https 开头");
                        return;
                    }
                    isEmpty = false
                }
            }

            if (!this.form.content && isEmpty) { this.$message.error("未填写任何内容"); return }
            this.form.creator = this.auth.getAccount().id
            this.form.createAtStr = "刚刚"

            if (this.form.demandId) {
                this.request.post({
                    url:"demand.chat.save", data: this.form
                }).then( res => {
                    this.$emit("complete", this.format.chat(res.result));
                }, res => {
                    this.$message.error("保存失败");
                })
            } else {
                this.$emit("complete", this.format.chat(this.form));
            }
        },

        toUpload(e) {
            if (e.target.files.length ==0 ) {
                this.$message.error("未选择任何文件");
                return
            }

            let formData = new FormData()
            formData.append("file", e.target.files[0]);
            this.request.upload({
                url:"upload.file", data: formData
            }).then( res => {
                let idx = parseInt(e.target.id)
                this.form.resources[idx].type = 20
                this.form.resources[idx].title = e.target.files[0].name
                this.form.resources[idx].content = res.result.url
                this.form.resources[idx].status = 1
                this.$forceUpdate()
            }, res => {
                this.$message.error("上传失败");
            })
        }
    },
};
</script>
<style scoped lang="scss">
.chat-item {

}
</style>
